<template>
  <div class="print-template">
    <div
      class="printBox"
      v-for="(item, index) in printArr"
      :key="index"
    >
      <div
        class="printBox"
        v-for="(page, pageIndex) in item.page"
        :key="pageIndex"
      >
        <table class="assetPrintTable">
          <thead>
          <tr class="printBox-title">
            <th colspan="10">工序流转卡</th>
          </tr>
          <tr class="printBox-info">
            <th colspan="3">流转卡号：{{ item.cardNumber }}</th>
            <th colspan="3">MO编号：{{ item.moNumber }}</th>
            <th colspan="4">物料编码：{{ item.materialCode }}</th>
          </tr>
          <tr class="printBox-info">
            <th colspan="3">物料名称：{{ item.materialName }}</th>
            <th colspan="3">规格型号：{{ item.specification }}</th>
            <th colspan="4">材质：{{ item.materialType }}</th>
          </tr>
          <tr class="printBox-info">
            <th colspan="3">表面处理：{{ item.surfaceTreatment }}</th>
            <th colspan="3">数量：{{ item.quantity }}</th>
            <th colspan="4">单位：{{ item.unit }}</th>
          </tr>
          <tr class="printBox-info">
            <th colspan="3">计划开始时间：{{ item.plannedStartTime }}</th>
            <th colspan="3">计划结束时间：{{ item.plannedEndTime }}</th>
            <th colspan="4">生命周期：{{ item.lifecycle }}</th>
          </tr>
          <tr class="m-order-list-header-wrap">
            <th>序号</th>
            <th>流转卡号</th>
            <th>工序序号</th>
            <th>工序编码</th>
            <th>工序名称</th>
            <th>总耗时</th>
            <th>总数量</th>
            <th>完工数量</th>
            <th>报废数量</th>
            <th>状态</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(k, num) in page.goods" :key="num">
            <td>{{ pageIndex * 16 + num + 1 }}</td>
            <td>{{ k.flowCardNumber }}</td>
            <td>{{ k.processSequence }}</td>
            <td>{{ k.processCode }}</td>
            <td>{{ k.processName }}</td>
            <td>{{ k.totalTimeConsumption }}</td>
            <td>{{ k.totalQuantity }}</td>
            <td>{{ k.completedQuantity }}</td>
            <td>{{ k.scrappedQuantity }}</td>
            <td>{{ k.statusMsg }}</td>
          </tr>
          </tbody>
        </table>
        <!-- 分页控制 -->
        <div class="paging"></div>
      </div>
    </div>
  </div>
</template>


<script>

export default {
  name: 'PrintTemplate',
  props: {
    printArr: {
      type: Array,
      required: true
    }
  }
}
</script>

<style scoped>
@page {
  size: auto;
}

.paging {
  page-break-after: always;
}
</style>
